<template>
  <div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="classify">
        <ul>
          <li v-for="(item,key) in list" :key="key" @click="Info(item.id)">
            <div>
              <p class="tit">{{item.title}}</p>
              <p>{{item.start_play_date | formatDate}} ~ {{item.end_play_date | formatDate}}共{{item.total_periods}}课时</p>
              <p class="p1" v-for="(i,k) in item.teachers_list" v-show="k<3">
                <img :src="i.teacher_avatar" alt />
                <span>{{i.teacher_name}}</span>
              </p>
            </div>
            <p>
              <span v-if="item.course_type != 4">共有{{item.sales_num}}人报名</span>
              <span v-else>共有{{item.brows_num}}人报名</span>
              <span class="sp" v-if="item.price">
                <img class="price-ico" src="../assets/images/pay-other.png" />
                {{item.price}}
              </span>
              <span class="spa" v-else>免费</span>
            </p>
          </li>
        </ul>
      </div>
    </van-list>
  </div>
</template>

<script>
import { List } from 'vant';
import { classify} from "../request/api.js";

export default {
    components:{
         [List.name]: List,
    },
    props: {
    params: {
      type: Object,
      default() {
        return {};
      }
    },
    onFormatter: {
      type: Function
    },
    onGetdata: {
      type: Function
    },
    onFinished: {
      type: Function
    },
    showText: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page:0
    };
  },
  methods: {
  	isText:function(_value) {
        _value = ""+_value;
        if (_value == "null" || _value == null || _value == "" || _value == "undefined") {
            return '';
        }
        return _value;
    },
    // on evnet
    onLoad() {
      this.page++;
      this.requestList();
    },
    Info(id) {
      console.log(id);
      this.$router.push({ path: "/part", query: { id: id } });
    },
    // other
    reset(refresh = 0) {
      if (!refresh) {
        this.onGetdata && this.onGetdata([]);
      }
      this.$nextTick(() => {
        if (this.finished) {
          this.page = 0;
          this.finished = false;
        } else {
          this.page = 1;
          this.requestList();
        }
      });
    },
    // request
    requestList() {
      const obj = {
        page: this.page,
        ...this.params
      };
      classify(obj).then(res => {
        this.loading = false;
        let data = res.data;
        console.log(data.list);
        console.log(this.page)
        if(this.isText(data.current_page)!='')
        {
        	
        	if (data.list.length == 0 && this.page != 1) {
	          this.finished = true;
	          this.onFinished && this.onFinished();
	          return;
	        }
	        this.onFormatter && this.onFormatter(data.list);
	        if (this.page == 1) {
	          this.list = data.list;
	        } else {
	          this.list = this.list.concat(data.list);
	        }
	        this.onGetdata && this.onGetdata(this.list);
        }
        else
        {
        	if (data.length == 0 && this.page != 1) {
	          this.finished = true;
	          this.onFinished && this.onFinished();
	          return;
	        }
	        this.onFormatter && this.onFormatter(data);
	        if (this.page == 1) {
	          this.list = data;
	        } else {
	          this.list = this.list.concat(data);
	        }
	        this.onGetdata && this.onGetdata(this.list);
        	 this.finished = true;
        }
      });
    }
  
},
filters: {
    formatDate: function(value) {
      let date = new Date(value*1000);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let a=""
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return MM + "月" + d + "日" + h + ":" + m ;
    }
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.classify {
  width: 100%;
  margin-bottom: 50px;
  h5 {
    font-size: 18px;
    margin-top: 20px;
    margin-left: 10px;
  }
  ul {
    list-style: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 96%;
      height: 150px;
      background: white;
      display: block;
      margin: 0 auto;
      margin-top: 15px;
      border-radius: 5px;
      text-align: left;
      div {
        width: 100%;
        height: 70%;
        border-bottom: 1px solid rgb(165, 163, 163);
        line-height: 30px;
        margin-left: 5px;
        .tit {
          font-size: 13px;
        }
        .p1 {
          display: inline;
        }
        p > img {
          width: 15px;
          height: 15px;
          border-radius: 50px;
          margin-left: 15px;
        }
      }
      p {
        font-size: 13px;
        .spa {
          color: green;
          float: right;
          margin-top: 5px;
        }
        .sp {
          float: right;
          margin-top: 5px;
          .price-ico {
            width: 10px;
            height: 10px;
          }
        }
      }
    }
  }
}
</style>